import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    View,
    Text,
    StyleSheet,
    StatusBar,
    Platform
} from 'react-native';

const NAVBAR_HEGIHT_IOS = 44;
const NAVBAR_HEGIHT_ANDROID = 50;
const STATUS_BAR_HEGIHT = 20;
const statusBarShape = {
    backgroundColor: PropTypes.string,
    barStyle       : PropTypes.oneOf(['default', 'light-content', 'dark-content']),
    hidden         : PropTypes.bool
}

class NavigationBar extends Component {
    static propTypes = {
        title      : PropTypes.string,
        titleView  : PropTypes.element,
        leftButton : PropTypes.element,
        rightButton: PropTypes.element,
        hide       : PropTypes.bool,
        statusBar  : PropTypes.shape(statusBarShape)
    }
    static defaultProps = {
        barStyle: 'light-content',
        hidden  : false
    }

    constructor(props) {
        super(props)
    }

    render() {
        let titleView = this.props.titleView ? this.props.titleView :
            <Text style={styles.title} numberOfLines={1}>{this.props.title}</Text>
        let content = (
            <View style={styles.navBar}>
                {this.props.leftButton}
                <View style={styles.titleViewContainer}>
                    {titleView}
                </View>
                {this.props.rightButton}
            </View>
        );
        return (
            <View style={[styles.container, this.props.style]}>
                <View style={[styles.statusBar, this.props.statusBar]}>
                    <StatusBar backgroundColor='#2196F3' {...this.props.statusBar}/>
                </View>
                {content}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container         : {
        backgroundColor: '#2196F3'
    },
    navBar            : {
        justifyContent: 'space-between',
        alignItems    : 'center',
        height        : Platform.os === 'ios' ? NAVBAR_HEGIHT_IOS : NAVBAR_HEGIHT_ANDROID,
        flexDirection : 'row',
    },
    titleViewContainer: {
        justifyContent: 'center',
        alignItems    : 'center',
        position      : 'absolute',
        left          : 40,
        right         : 40,
        top           : 0,
        bottom        : 0,
    },
    title             : {
        fontSize: 20,
        color   : 'white'
    },
    statusBar         : {
        height: Platform.os === 'ios' ? STATUS_BAR_HEGIHT : 0,
    }
})

export default NavigationBar